<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <xxx :title='msg' :num="12" :bool=false></xxx><br>
        <xxx :arr="friuts"></xxx>
        <xxx :object="car"></xxx>
        <!-- <xxx title='来自父组件的值'></xxx> -->
    </div>
    <script src="./js/vue.js"></script>
    <script>
    Vue.component('xxx',{
        props:['title','num','bool','arr','object'],
        data:()=> {
            return {
                res:'子组件'
            }
        },
        template:`<div>
                <span>{{res + "----" + title + "----" + num + "----" + bool}}</span><br>
                <ul :key="index" v-for="(item,index) in arr">
                    <li>{{item}}</li>
                </ul>
                <ul :key="index" v-for="(item,index) in object">
                    <li>{{item.name}}</li>
                </ul>
                </div>`
    })


    const ve = new Vue({
        el:'#app',
        data:{
            msg:'hello',
            friuts:[
                'apple',
                'orange',
                'lemon'
            ],
            car:[
                {
                    name:'捷豹'
                },
                {
                    name:'本田'
                },
                {
                    name:'宝马5系'
                }
            ]
        }
    })
    </script>
</body>
</html>